<template>
	<view class="taskAllocation_wrapper" >
		<u-navbar title='验收作业' :autoBack="true" leftIconColor="#1E272E" bgColor="transparent" :titleStyle="{fontWeight:700,fontSize:'32rpx',color:'#1E272E'}" ></u-navbar>
		<image
			src="https://renovationcdn.jiachuangnet.com/details1/bg.png"
			class='bg' style="height: 476rpx;width: 100%;"></image>
		<view class="container">
			<view class="taskAllocation_msg">
				<view class="flex case_wrappper" style="justify-content: start">
					<view class="case_item">
						<view class="flagship">
							待验收
						</view>
						<image :src="info.storeImg.includes('http')?info.storeImg:'https://'+info.storeImg" mode="" class="case_img" v-if="info.storeImg"></image>
						<image src="https://renovationcdn.jiachuangnet.com/details1/noPic.png" mode="" class="case_img" v-else></image>
					</view>
					<view class="taskMsg">
						<view class="flex">
							<view class="taskTital"  v-if="info.assignName">
								{{info.assignName}}
							</view>
							<view class="tag">
								<image src="https://renovationcdn.jiachuangnet.com/details1/zhuangxiu.png" mode="" style="width: 34rpx;height: 34rpx;padding-right: 19rpx;"></image>
								装修
							</view>
						</view>
						<view class="timer"  v-if="info.createTime">
							发布时间： {{info.createTime.split(' ')[0]}}
						</view>
						<view class="taskName" v-if="info.taskNameList">
							 {{info.taskNameList.join(',')}}
						</view>
					</view>
				</view>
				<view class="taskForm">
					<view class="flex alignItem bewteen">
						<view class="label" style="width:200rpx">实际开工日期</view>
						<view class="val" v-if="info.startTime">
							{{info.startTime.split(' ')[0].replace(/-/g, '.')}}
						</view>
					</view>
					<view class="flex alignItem bewteen">
						<view class="label" style="width:auto">地址</view>
						<view class="val" v-if="info.address">
							{{info.address}}
						</view>
					</view>
					<view class="flex alignItem bewteen">
						<view class="label" style="width:200rpx">预计完工日期</view>
						<view class="val" v-if="info.endTime">
							{{info.endTime.split(' ')[0].replace(/-/g, '.')}}
						</view>
					</view>
				</view>
				<view class="titleList_item_1">
					<view class="text" >
						任务详情
					</view>
					<view class="taskList_wrapper">
						<view  v-for="(v,i) in info.list" :key="i" >
							<view  v-for="(item,index) in v.acceptanceUserInfos" :key="index" class="taskList_wrapper_item">
								<view style="position: absolute;top: 100rpx;left: 160rpx;">
									<image
										src="https://renovationcdn.jiachuangnet.com/hege.png"
										style="width: 178rpx;height:154rpx;"
										v-if="item.isQualified==0"
										>
									</image>
									<image
										src="https://renovationcdn.jiachuangnet.com/buhege.png"
										style="width: 178rpx;height:154rpx;"
										v-if="item.isQualified==1"
										>
									</image>
								</view>
								<view class="taskAcceptance">
									<view class="flex alignItem bewteen">
										<view class="label" style="width:auto">任务内容</view>
										<view class="val" v-if="v.taskName">
											{{v.taskName}}
										</view>
									</view>
									<view class="flex alignItem bewteen">
										<view class="label" style="width:auto">完成人</view>
										<view class="val" v-if="item.userName">
											{{item.userName}}
										</view>
									</view>
									<view class="flex alignItem bewteen">
										<view class="label" style="width:200rpx">实际完成日期</view>
										<view class="val" v-if="item.actualCompletionDate">
											{{item.actualCompletionDate}}
										</view>
									</view>
									<view class="flex alignItem bewteen">
										<view class="label" style="width:200rpx">实际情况</view>
										<view class="val" v-if="item.actualSituation">
											{{item.actualSituation}}
										</view>
									</view>
									<view class="flex alignItem" style="flex-direction: column;justify-content: start;align-items: start;">
										<view class="flex" style="justify-content: space-between;width: 100%;">
											<view class="label" style="width:200rpx;display: flex;align-items: center;">上传图片</view>
											<text v-if="item.isQualified==1" style="margin-left: 10rpx;font-weight: 500;font-size: 30rpx;color: #007aff;" @click="noPassReason(item.distributionId)">查看原因</text>
										</view>
										<view class="val" style="margin-left: -10rpx; display: flex;justify-content: start;flex-wrap: wrap;" v-if="item.uploadPicture">
											<img :src="'https://'+url" alt="" v-for="(url,urlIndex) in item.uploadPicture.split(',')" :key="urlIndex" @click="viewImage(urlIndex,item.uploadPicture.split(','))"/>
										</view>
									</view>
									<view class="btnWrapper" v-if="item.isQualified==2">
										<view class="arrangementBtn1"  @click="passOrUnPass(0,item,v.taskId)">
											合格
										</view>
										<view class="arrangementBtn2"  @click="passOrUnPass(1,item,v.taskId)">
											不合格
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="titleList_item_1" style="margin-bottom: 100rpx;">
					<view class="text" >
						验收情况
					</view>
					<view class="taskList_wrapper">
						<view class="taskList_wrapper_item">
							<view class="isOkWrapper">
								<view class="isOkTrue" style="margin-bottom: 49rpx;">
									<view style="width: 200rpx;white-space: nowrap;">
										合格任务：
									</view>
									<view>
										<view v-for="(v,i) in info.list" :key="i">
											<view v-for="(item,index) in v.acceptanceUserInfos" :key="index">
												<view v-if="item.isQualified==0" class="isOkItem">
													{{`[${v.taskName}-${item.userName}]`}}
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="isOkFalse">
									<view style="width: 200rpx;white-space: nowrap;">
										不合格任务：
									</view>
									<view>
										<view v-for="(v,i) in info.list" :key="i">
											<view v-for="(item,index) in v.acceptanceUserInfos" :key="index">
												<view v-if="item.isQualified==1" class="isOkItem">
													{{`[${v.taskName}-${item.userName}]`}}
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-popup :show="showReject" @close="close" round="10" mode="center" :closeable="true">
					<view class="overdueForm">
						<text style="color: #cb2d01;padding-right: 5rpx;">*</text> <text>备注:</text>
						<u--textarea v-model="rejectInfo.reason" border="none" :disabled="checkNoPassReason" placeholder="请输入不合格原因"></u--textarea>
						<text style="color: #cb2d01;padding-right: 5rpx;">*</text><text>上传说明图:</text>
						<upload v-if="showReject" :deletable="false" name="1" :fileListInit="rejectInfo.imgList||[]"  @uploadFile="uploadFile" :disabled="checkNoPassReason"></upload>
						<view class="flex alignItem bewteen"  @click="calendarShow=true" style="margin-bottom: 50rpx;" v-if="!checkNoPassReason">
							<view class="label" style="width:300rpx" ><text style="color: #cb2d01;padding-right: 5rpx;">*</text>预计完成时间</view>
							<view class="val"  v-if="rejectInfo.expectTime" style="font-size: 28rpx;">
								{{rejectInfo.expectTime}}
								<!-- <u-input v-model="" :disabled="true" placeholder="请选择计划完工时间" inputAlign="right"></u-input> -->
							</view>
							<view class="val" style="text-align: right;color: #c7ccd3;font-size: 28rpx;" v-else>
								请选择预计完成时间
							</view>
							<!-- <view class="val">
								<u-input v-model="rejectInfo.expectTime" :disabled="true" placeholder="请选择预计完成时间" ></u-input>
							</view> -->
						</view>	
						<view class="flex alignItem bewteen"  style="margin-bottom: 50rpx;" v-else>
							<view class="label" style="width:300rpx" >预计完成时间</view>
							<view class="val">
								<u-input v-model="rejectInfo.expectTime" :disabled="true" placeholder="请选择预计完成时间" ></u-input>
							</view>
						</view>
						<u-button type="primary"  text="确认" @click="onSubmit"  shape="circle" v-if="!checkNoPassReason"></u-button>
					</view>
				</u-popup>
				<u-button style="height: 88rpx;"  color='#13989a' @click="confirmAcceptance" :loading="loading" v-if="complete==3" shape="circle" >确认验收</u-button>
			</view>
		</view>
		
		
		<u-calendar :show="calendarShow" color="#13989a" @confirm="confirm" @close="calendarShow=false"></u-calendar>
	</view>
</template>

<script>
	let app = getApp();
	export default {
		data() {
			return {
				loading:false,
				bottom: app.globalData.safeBottom,
				currentTask:0,
				info:{},
				assignTaskId:0,
				showReject:false,
				calendarShow:false,
				assignTaskDetailsId:0,
				checkNoPassReason:false,
				rejectInfo:{
					taskId:0,
					reason:'',
					imgList:[],
					expectTime:''
				},
				complete:null,
				taskStateList:[
					{
						name:'全部',
						badge: {
						    value: 5,
						}
					},{
						name:'待开始'
					},{
						name:'进行中'
					},{
						name:'待验收'
					},{
						name:'已逾期'
					}
				]
			}
		},
		onShow() {
			this.getAcceptanceDetail()
		},
		onLoad(option) {
			this.assignTaskId = option.assignTaskId;
			this.assignTaskDetailsId= option.assignTaskDetailsId
			this.complete= option.complete
		},
		methods:{
			noPassReason(distributionId){
				this.checkNoPassReason=true
				this.showReject=true
				uni.$u.http.get('/acceptance/getNoPassReason', {
					 params:{
						 distributionId
					 }
				}).then(res=>{
					this.rejectInfo.reason=res.noPassReason
					this.rejectInfo.imgList=res.noPassImgStr?res.noPassImgStr.split(','):[]
					this.rejectInfo.expectTime=res.noPassReason
				})
			},
			viewImage(current,imgUrl){
				uni.previewImage({
					current: current,
					urls: imgUrl.map(url=>'https://'+url),
					longPressActions: {
						itemList: ['保存图片'],
						success: data=> {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
							uni.closePreviewImage()
							/* 保存图片到系统相册 */
							if(data.tapIndex==0){
								uni.getImageInfo({
											src:imgUrl.map(url=>'https://'+url)[data.index],
											success: function(res) {
												console.log(res)
												uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
													filePath:res.path, //图片文件路径
													success: function() {
														uni.showToast({
															title: '图片保存成功',
															icon: 'none',
														});
													},
													fail: function(e) {
														console.log(e);
														uni.showToast({
															title: '图片保存失败',
															icon: 'none',
														});
													},
												});
											},
											fail: function(e) {
												console.log(e);
												uni.closePreviewImage()
												uni.showToast({
													title: '图片保存失败',
													icon: 'none',
												});
											},
										})
							}
						},
													fail: function(err) {
														console.log(err.errMsg);
													}
												}
				});
			},
			isConfirmAcceptance(){
				let distributionId=[]
				return new Promise((resolve,reject)=>{
					this.info.list.forEach(list=>{
						list.acceptanceUserInfos.some(item=>{
							if(item.isQualified==2){
								// 未验收
								uni.showToast({
									title: '有未验收任务',
									duration: 1000,
									icon:'error',
									mask:true
								});
								reject(false)
								return true
							}else{
								distributionId.push(item.distributionId)
							}
						})
					})
					resolve(distributionId)
				})
			},
			async confirmAcceptance(){
				if(this.loading){
					return
				}
				let distributionId= await this.isConfirmAcceptance()
				if(distributionId){
					// 所有的任务验收完成
					this.loading=true
					uni.$u.http.post('/acceptance/confirmAcceptance', {
						 distributionId,
						assignTaskId: 0
					}).then(res=>{
						if(res){
							uni.showToast({
								title: '验收成功',
								duration: 1000,
								mask:true,
								complete:()=>{
									this.loading=false
									setTimeout(()=>{
										uni.redirectTo({
											url:`/pages/taskProgress/index?assignTaskId=${this.assignTaskId}`
										})
									},1000)
								}
							});
						}else{
						uni.$u.toast('操作失败');
						this.loading=false
					}
					})
				}
				
			},
			confirm(e){
				console.log(e)
				this.calendarShow=false
				this.rejectInfo.expectTime=e[0]
			},
			close(){
				this.rejectInfo.taskId=0
				this.rejectInfo.reason=''
				this.rejectInfo.imgList=[]
				this.rejectInfo.expectTime=''
				this.showReject=false
				this.calendarShow=false
				this.checkNoPassReason=true
			},
			onSubmit(){
				if(!this.rejectInfo.reason.length||!this.rejectInfo.imgList.length||!this.rejectInfo.expectTime){
					return uni.$u.toast('请填写必传字段 :)');
				}
				uni.$u.http.post('/acceptance/passOrUnPass', {
					assignTaskId:this.assignTaskId,
					assignTaskDetailsId:this.assignTaskDetailsId,
					isQualified:1,
					taskId:this.rejectInfo.taskId,
					reason:this.rejectInfo.reason,
					expectTime:this.rejectInfo.expectTime,
					userId:this.rejectInfo.info.userId,
					noPassImg:this.rejectInfo.imgList
				}).then(res=>{
					if(res){
						uni.showToast({
							title: '操作成功',
							duration: 1000,
							mask:true,
							complete:()=>{
								this.getAcceptanceDetail()
								this.close()
							}
						});
					}
				})
			},
			uploadFile(msg){
				this.rejectInfo.imgList=msg.files
			},
			passOrUnPass(state,info,taskId){
				if(state==1){
					this.showReject=true
					this.checkNoPassReason=false
					this.rejectInfo.info=info
					this.rejectInfo.taskId=taskId
				}else{
					uni.$u.http.post('/acceptance/passOrUnPass', {
						assignTaskId:this.assignTaskId,
						assignTaskDetailsId:this.assignTaskDetailsId,
						isQualified:0,
						taskId,
						userId:info.userId,
					}).then(res=>{
						if(res){
							uni.$u.toast('操作成功：）');
							this.getAcceptanceDetail()
						}
					})
				}
				
			},
			getAcceptanceDetail(){
				uni.$u.http.get('/acceptance/getAcceptanceDetail', {
					params:{
						assignTaskDetailsId:this.assignTaskDetailsId,
					}
				}).then(res=>{
					console.log(res,'获取任务详情信息')
					if(res){
						this.info=res
					}
					
				})
			},
			changeTaskState(e){
				console.log(e)
				// this.currentTask=index
			},
		}
	}
</script>

<style lang="scss" scoped>
	.isOkWrapper{
		.isOkTrue,.isOkFalse{
			display: flex;
			font-weight: bold;
			font-size: 28rpx;
			color: #1E272E;
		}
		.isOkFalse{
			color: #ed115e;
		}
		.isOkItem{
			display: flex;
			justify-content: start;
			flex-wrap: wrap;
			font-weight: 500;
			font-size: 28rpx;
			color: #868686;
			line-height: 40rpx;
			padding-right: 20rpx;
		}
	}
	
	.bg {
		width: 750rpx;
		height: 430rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.container {
		width: 700rpx;
		position: absolute;
		top: 180rpx;
		left: 25rpx;
		z-index: 2;
		// min-height: 100vh;
		padding-bottom: 200rpx;
	}
	
	.taskList_wrapper_item{
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 23rpx;
		position: relative;
		margin-bottom: 22rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #1E272E;
	}
	.titleList_item_1{
		margin-top: 21rpx;
		.text{
			font-weight: bold;
			font-size: 32rpx;
			color: #1E272E;
			line-height: 40rpx;
			margin-bottom: 21rpx;
		}
		.btnWrapper{
			margin-top: 58rpx;
			display: flex;
			.arrangementBtn1,.arrangementBtn2{
				flex: 1;
				color: #fff;
				background-color: #13989a;
				padding: 15rpx 20rpx;
				border-radius: 30rpx;
				margin: 0 23rpx;
				white-space: nowrap;
				text-align: center;
				box-sizing: border-box;
			}
			.arrangementBtn2{
				background-color: #ed115e;
			}
		}
	}
	.overdueForm_title {
		font-weight: 700;
		display: flex;
		justify-content: center;
	}
	
	.overdueForm {
		padding: 50rpx 30rpx;
		width: 80vw;
	}
	
	.taskForm{
		background: #FFFFFF;
		border-radius: 20rpx;
		font-size: 30rpx;
		padding: 23rpx;
	}
	.alignItem{
		  line-height: 62rpx;
		  color: #868686;
		  .val{
			  text-align: right;
			  font-weight: 500;
			  font-size: 30rpx;
			  color: #1E272E;
			  img{
			  	width: 199rpx;
			  	height: 151rpx;
			  	border-radius: 20rpx;
				margin: 10rpx;
			  }
		  }
	}
	
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: white;
		z-index: 10000;
		width: 100%;
		padding: 20rpx 0;
		min-height: 20rpx;
	}
	.titleList_item_1{
		.titleList_item{
			background: #FFFFFF;
			border-radius: 20rpx;
			font-size: 30rpx;
			padding: 23rpx;
			margin-top: 21rpx;
			.text{
				font-weight: 500;
				font-size: 30rpx;
				color: #1E272E;
			}
			
			.taskList_wrapper{
				padding: 0 10rpx;
				.stateTag{
					position: absolute;
					top: 0;
					right: 0;
					line-height: 44rpx;
					padding: 0px 15rpx;
					border-radius: 12rpx;
					background-image: linear-gradient(90deg, #3dd4a7 0%, #00ffff 100%, #00ffff 100%);
					color: #ffffff;
					text-align: center;
				}
				.taskList_wrapper_item{
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 23rpx;
					position: relative;
					margin-bottom: 22rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #1E272E;
					.day,.time{
						display: flex;
						font-size: 30rpx;
						font-weight: bold;
						height: 92rpx;
						align-items: center;
						border-bottom: 2px dashed #e0f1f2;
						
					}
					::v-deep.content{
						font-weight: 650;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 10rpx 20rpx;
						.u-tag-wrapper{
							margin: 0 5rpx;
						}
					}
				}
			}
		}
	
	}
	
	.taskAllocation_wrapper{
		font-size: 24rpx;
		background-color: #f5f5f5;
		.taskAllocation_msg{
		}
	}
	
	.case_wrappper{
		justify-content: space-between;
		margin-bottom: 34rpx;
		.case_item{
			position: relative;
			border-radius: 10rpx;
			overflow: hidden;
			.case_img{
				width: 226rpx;
				height: 261rpx;
				border-radius: 20rpx;
			}
		}
		.taskMsg{
			padding-right: 70rpx;
			padding-left: 28rpx;
			flex: 1;
			.taskName{
				width: 350rpx;
				 font-weight: 500;
				  color: #139698;
				  font-size: 32rpx;
				  margin-top: 58rpx;
				  overflow: hidden;
				  text-overflow:ellipsis;
				  white-space: nowrap;
			}
			.taskTital{
				 max-width: 220rpx;
				 font-weight: bold;
				 font-size: 36rpx;
				 color: #1E272E;
				 overflow: hidden;
				 text-overflow:ellipsis;
				 white-space: nowrap;
			}
			.tag{
				width: 146rpx;
				height: 45rpx;
				background: #b3d3d3;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #13989A;
				padding-left: 8rpx;
				box-sizing: border-box;
				margin-left: 21rpx;
			}
			.timer{
				font-weight: 500;
				font-size: 28rpx;
				color: #1E272E;
				margin-top: 25rpx;
				margin-bottom: 51rpx;
			}
			.allocation{
				font-weight: 500;
				font-size: 20rpx;
				color: #1E272E;
				margin-top: 12rpx;
			}
		}
		.flagship{
			width: 110rpx;
			line-height: 40rpx;
			background: #13989A;
			font-size: 22rpx;
			color: #FFFFFF;
			border-radius: (20rpx 0 20rpx 0 );
			text-align: center;
			position: absolute;
			top:0;
			left: 0;
			z-index: 1;
		}
	}
</style>